<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>

<div id="root">
    <h3>now N value: {{n}}</h3>
    <button @click="n++"> onClick</button>

    <!--    使用v-show做条件渲染：html结构还在 -->
    <h3 v-show="n === 2 ">Welcome come {{name}}</h3>

    <!--    使用v-if做条件渲染：html结构已经去掉-->
    <h3 v-if="ifShow">Welcome come {{name}}</h3>

    <!--    v-else 和 v-else-if （结构不能打断）-->
    <div v-if="n===2">Python</div>
    <div v-else-if="n===4">.Net</div>
    <div v-else-if="n===1">Java</div>
    <div v-else>C++</div>

    <!--    一起判断, 不影响html结构 （template只能与v-if配合使用）-->
    <template v-if="n > 3">
        <h4>AAAA</h4>
        <h4>BBBB</h4>
    </template>
</div>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            name: 'UB-AXC',
            n: 0,
            ifShow: true
        }

    })
</script>
</body>
</html>